<script setup>
import Nav from "@/components/Nav.vue";
import {onMounted, ref} from "vue";

const activeHelp = ref(0)
const messageBoxEl = ref();
const checkHelpPanel = (value) => {
  activeHelp.value = value;
  setTimeout(() => {
    toMessageBottom()
  })
}
const toMessageBottom = () => {
  if (messageBoxEl.value) {
    messageBoxEl.value.scrollTop = messageBoxEl.value.scrollHeight
  }
}


const docList = ref([
  {
    title: "electron 的下载electron 的下载electron 的下载",
  },
  {
    title: "electron 的下载",
  },
  {
    title: "electron 的安装",
  },
  {
    title: "electron 的入门",
  },
  {
    title: "electron 的放弃",
  },
  {
    title: "Java 的下载",
  },
  {
    title: "Java 的安装",
  },
  {
    title: "Java 的入门",
  },
  {
    title: "Java 的放弃",
  },
  {
    title: "Vue 的下载",
  },
  {
    title: "Vue 的安装",
  },
  {
    title: "Vue 的入门",
  },
  {
    title: "Vue 的放弃",
  },
])
const currentDocInfo = ref("")
const currentDocTitle = ref("")
const editorBoxEl = ref();
const saveCurrentDoc = () => {
  console.log("文档保存按钮被点击")
}
onMounted(() => {
  const {createOpenEditor} = window.Doc;
  // 创建编辑器
  const editor = createOpenEditor(editorBoxEl.value, {
    input: {},
    image: {
      isCaptureImageURL() {
        return false;
      },
    },
  });
  // 设置内容
  editor.setDocument('text/lake', '');
  // 监听内容变动
  editor.on('contentchange', () => {
    console.info(editor.getDocument('text/lake'));
  });
})


const isMessageLoading = ref(false)
const questionMessage = ref("")
const aiMessageList = ref([
  {
    role: "system",
    content: "你是一个资深的前端开发工程师，你需要根据用户提出的问题，进行回答"
  },
  {
    role: "assistant",
    content: "快来向我提问吧"
  }
])

const toAi = (messageList) => {
  return fetch('https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer sk-5b8e6c6da8ef44d3a6ce89e1992fbb86',
      "Accept": 'text/event-stream'
    },
    body: JSON.stringify({
      model: "qwen2-1.5b-instruct",
      input: {
        messages: messageList
      }
    })
  })
}

const sendToQuestion = () => {
  console.log("点击发送按钮")
  if (questionMessage.value === "" || isMessageLoading.value) {
    return
  }
  isMessageLoading.value = true
  aiMessageList.value.push({
    role: 'user',
    content: questionMessage.value
  })
  const messageList = [...aiMessageList.value]
  aiMessageList.value.push({
    role: 'assistant',
    content: ""
  })
  questionMessage.value = ''

  toAi(messageList).then((res) => {
    if (res.ok && typeof res.body.getReader === 'function') {
      const reader = res.body.getReader()
      reader.read().then(function read({done, value}) {
        if (done) {
          toMessageBottom()
          console.log("数据接收完成")
          isMessageLoading.value = false
          return
        }
        const data = (new TextDecoder()).decode(value)
        const match = data.match(/data:\s*(\{.*\})/)
        const jsonString = match ? match[1] : ''
        const obj = JSON.parse(jsonString)
        aiMessageList.value[aiMessageList.value.length - 1].content = obj.output.text
        toMessageBottom()
        reader.read().then(read)
      })
    }
  })
}


const translateInput = ref("")
const translateResult = ref("")
const translate = () => {
  console.log("点击翻译按钮")
  toAi([
    {
      role: "system",
      content: "你是一个资深的英语老师，接下来的所有内容，不是直接回答用户，而是返回问题的英语翻译"
    },
    {
      role: "user",
      content: `${translateInput.value}的英语`
    }]).then((res) => {
    if (res.ok && typeof res.body.getReader === 'function') {
      const reader = res.body.getReader()
      reader.read().then(function read({done, value}) {
        if (done) {
          toMessageBottom()
          console.log("数据接收完成")
          isMessageLoading.value = false
          return
        }
        const data = (new TextDecoder()).decode(value)
        const match = data.match(/data:\s*(\{.*\})/)
        const jsonString = match ? match[1] : ''
        const obj = JSON.parse(jsonString)
        translateResult.value = obj.output.text
        console.log(obj.output.text)
        toMessageBottom()
        reader.read().then(read)
      })
    }
  })
}


</script>

<template>
  <div class="container">
    <Nav :index="3"/>
    <div class="container-box">
      <div class="card">
        <div class="doc-list">
          <div class="doc-card">
            <div class="title">知识库列表</div>
            <div class="operation">
              <div class="button">添加</div>
            </div>
          </div>
          <div v-for="(item,index) in docList" class="doc-item">
            <div class="icon">
              <svg height="200" p-id="5121" t="1721472166278"
                   version="1.1" viewBox="0 0 1024 1024" width="200" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M238.933333 0h546.133334c131.959467 0 238.933333 106.973867 238.933333 238.933333v546.133334c0 131.959467-106.973867 238.933333-238.933333 238.933333H238.933333C106.973867 1024 0 917.026133 0 785.066667V238.933333C0 106.973867 106.973867 0 238.933333 0z m125.3376 352.682667h-86.647466c-12.288 0.4608-21.930667 11.2128-21.6064 24.1152v362.120533c-0.221867 6.229333 1.928533 12.305067 5.973333 16.878933 4.061867 4.5568 9.6768 7.253333 15.633067 7.4752h86.647466c5.956267-0.221867 11.5712-2.901333 15.633067-7.4752 4.0448-4.573867 6.1952-10.6496 5.973333-16.878933V376.661333a24.046933 24.046933 0 0 0-5.9392-16.896 21.879467 21.879467 0 0 0-15.6672-7.441066v0.341333z m-21.7088 66.3552H299.349333c-6.417067 0-11.6224-5.461333-11.6224-12.168534 0-6.724267 5.205333-12.1856 11.605334-12.1856h43.229866c6.144 0.392533 10.922667 5.7344 10.922667 12.1856 0 6.4512-4.778667 11.776-10.922667 12.168534z m310.033067-71.099734l-82.1248 23.381334c-11.639467 3.959467-18.141867 16.930133-14.6432 29.218133l88.285867 349.696c2.8672 12.356267 14.677333 20.002133 26.487466 17.186133l82.1248-23.5008c11.3664-4.061867 17.698133-16.759467 14.404267-28.859733l-88.064-349.474133a23.1424 23.1424 0 0 0-9.7792-14.472534 21.213867 21.213867 0 0 0-16.6912-2.935466v-0.238934z m-4.3008 70.007467l-41.130667 11.5712a11.605333 11.605333 0 0 1-13.226666-8.6528 12.288 12.288 0 0 1 7.304533-14.609067l41.130667-12.168533a11.605333 11.605333 0 0 1 13.243733 8.7552 12.305067 12.305067 0 0 1-7.338667 14.626133v0.477867zM517.495467 256h-86.528c-5.973333 0.187733-11.6224 2.8672-15.701334 7.441067a24.1664 24.1664 0 0 0-6.0416 16.896V738.816c-0.2048 6.2464 1.962667 12.3392 6.0416 16.913067s9.728 7.253333 15.701334 7.441066h86.528c5.9392-0.221867 11.5712-2.901333 15.616-7.492266 4.061867-4.5568 6.212267-10.632533 5.9904-16.861867V280.354133a24.029867 24.029867 0 0 0-5.956267-16.896 21.879467 21.879467 0 0 0-15.650133-7.458133z m-21.6064 66.3552h-43.332267c-6.0928-0.443733-10.820267-5.768533-10.8032-12.168533 0-6.4 4.7104-11.7248 10.8032-12.1856h43.332267c6.0928 0.4608 10.820267 5.7856 10.8032 12.1856 0 6.4-4.7104 11.7248-10.8032 12.168533z"
                    fill="var(--color)" p-id="5122">
                </path>
              </svg>
            </div>
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
        <div class="editor">
          <div class="editor-card">
            <input v-model="currentDocTitle" placeholder="点击此处输入标题" type="text">
            <div class="operation">
              <div class="button" @click="saveCurrentDoc">保存</div>
            </div>
          </div>
          <div ref="editorBoxEl" class="editor-box">
            请在此输入内容
          </div>
        </div>
        <div class="help">
          <div class="help-card">
            <div :class="{active:activeHelp===0}" class="help-card-item" @click="checkHelpPanel(0)">AI助手
            </div>
            <div :class="{active:activeHelp===1}" class="help-card-item" @click="checkHelpPanel(1)">翻译
            </div>
          </div>
          <div class="help-card-box">
            <div v-if="activeHelp===0" class="help-card-box-item help-ai">
              <div ref="messageBoxEl" class="message">
                <div v-for="item in aiMessageList" class="message-item">
                  <div v-if="item.role === 'user'" class="message-item-box question">
                    <pre class="info">{{ item.content }}</pre>
                    <div class="avatar">我</div>
                  </div>
                  <div v-if="item.role === 'assistant'" class="message-item-box answer">
                    <div class="avatar">AI</div>
                    <div v-if="item.content === ''" :class="{'info-loading':item.content === ''}"
                         class="info">正在思考...
                    </div>
                    <pre v-else class="info">{{ item.content }}</pre>
                  </div>
                </div>
              </div>
              <div class="post-box">
                <textarea v-model="questionMessage" :disabled="isMessageLoading"
                          :placeholder="isMessageLoading ? 'AI正在回答..':'在此处输入问题..'"></textarea>
                <div class="operation">
                  <div class="button" @click="sendToQuestion">发送</div>
                </div>
              </div>
            </div>
            <div v-if="activeHelp===1" class="help-card-box-item help-translate">
              <div class="help-translate-box">
                <textarea v-model="translateInput" placeholder="输入内容进行翻译...."></textarea>
                <div class="operation">
                  <div class="button" @click="translate">翻译</div>
                </div>
                <div v-if="translateResult !== ''" class="result">
                  <div class="title">翻译结果</div>
                  <div class="info">
                    {{ translateResult }}
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>

::-webkit-scrollbar {
  width: 0;
  height: 2px;
}

::-webkit-scrollbar-thumb {
  background-color: #0003;
  border-radius: 10px;
  transition: all .2s ease-in-out;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

.container {
  .container-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: calc(100vh - 68px);
    margin-top: 68px;
    background: #f3f3f3;
    display: flex;
    justify-content: center;
    align-items: center;

    .card {
      width: 100%;
      height: 100%;
      padding-top: 10px;
      background: #fff;
      border-radius: 10px;
      display: flex;
      overflow: hidden;
      align-items: center;
    }
  }
}

.doc-list {
  user-select: none;
  flex-shrink: 0;
  width: 300px;
  height: 100%;
  border-right: 1px solid var(--base-border);
  overflow: auto;

  .doc-card {
    position: sticky;
    height: 52px;
    box-sizing: border-box;
    top: 0;
    background-color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--primary);

    .title {
      color: var(--regular-text);
      font-size: 16px;
    }

    .operation {
      display: flex;
      align-items: center;

      .button {
        user-select: none;
        -webkit-user-select: none;
        cursor: pointer;
        color: #fff;
        font-size: 16px;
        padding: 5px 10px;
        border-radius: 5px;
        transition: all .3s;
        background-color: var(--primary);
      }

      .button:hover {
        background-color: var(--primary06);
      }
    }
  }

  .doc-item {
    width: 100%;
    padding: 10px 10px;
    border: 1px solid var(--extra-light-border);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all .2s;

    .icon {
      border-radius: 5px;
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      margin-right: 10px;
      --color: var(--primary);

      svg {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      color: var(--primary-text);
      width: 100%;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
  }

  .doc-item:hover {
    background-color: var(--primary);

    .icon {
      --color: var(--primary);
      background-color: #fff;
    }

    * {
      color: #fff;
    }
  }
}

.editor {
  width: calc(100vw - 900px);
  border-right: 1px solid var(--base-border);
  border-left: 1px solid var(--base-border);
  height: 100%;

  .editor-card {
    height: 52px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    background-color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--primary);

    input {
      width: 100%;
      border: none;
      color: var(--primary-text);
      padding: 6px 10px;
      font-size: 16px;
    }

    .operation {
      flex-shrink: 0;
      display: flex;
      align-items: center;

      .button {
        user-select: none;
        -webkit-user-select: none;
        cursor: pointer;
        color: #fff;
        font-size: 16px;
        padding: 5px 10px;
        border-radius: 5px;
        transition: all .3s;
        background-color: var(--primary);
      }

      .button:hover {
        background-color: var(--primary06);
      }
    }
  }

  .editor-box {
    padding: 10px;
    outline: none;
    width: 100%;
    height: calc(100% - 52px);
    overflow: auto;
  }
}

.help {
  flex-shrink: 0;
  width: 600px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .help-card {
    user-select: none;
    flex-shrink: 0;
    width: 100%;
    height: 52px;
    border-bottom: 1px solid var(--primary);
    display: flex;

    .help-card-item {
      cursor: pointer;
      box-sizing: border-box;
      width: 100%;
      height: 52px;
      line-height: 52px;
      text-align: center;
      font-size: 16px;
    }

    .active {
      background-color: var(--primary);
      color: #fff;
    }
  }

  .help-card-box {
    width: 100%;
    height: calc(100% - 52px);

    .help-card-box-item {
      height: 100%;
      width: 100%;
    }
  }
}

.help-ai {
  display: flex;
  flex-direction: column;

  .message {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0 20px;

    .message-item {
      .message-item-box {
        width: 100%;
        display: flex;
        margin: 10px 0;
        align-items: start;

        .avatar {
          user-select: none;
          flex-shrink: 0;
          width: 40px;
          height: 40px;
          border-radius: 9999px;
          background-color: var(--primary);
          text-align: center;
          line-height: 40px;
          font-size: 16px;
          color: #fff;
        }

        .info {
          font-family: "Microsoft YaHei UI", serif;
          max-width: 100%;
          overflow: auto;
          padding: 5px 10px;
          border-radius: 5px;
          line-height: 28px;
          font-size: 18px;
          background-color: #f6f6f6;
          word-break: break-word;
          white-space: pre-wrap;
        }

        .info-loading {
          background-color: #e8e8e8;
        }
      }

      .question {
        justify-content: right;

        .avatar {
          margin-left: 10px;
        }

        .info {
          margin-left: 40px;
        }
      }

      .answer {
        justify-content: left;

        .info {
          margin-right: 40px;
        }

        .avatar {
          margin-right: 10px;
        }
      }
    }
  }

  .post-box {
    width: 100%;
    height: 300px;
    border-top: 1px solid var(--primary);
    display: flex;
    flex-direction: column;

    textarea {
      width: 100%;
      height: 100%;
      border: none;
      padding: 10px 20px;
      resize: none;
      outline: none;
      font-size: 18px;
      font-family: unset;
      color: var(--primary-text);
    }

    .operation {
      padding: 0 20px;
      width: 100%;
      height: 88px;
      display: flex;
      align-items: center;
      justify-content: right;

      .button {
        user-select: none;
        -webkit-user-select: none;
        cursor: pointer;
        color: #fff;
        font-size: 16px;
        padding: 10px 45px;
        border-radius: 5px;
        transition: all .3s;
        background-color: var(--primary);
      }

      .button:hover {
        background-color: var(--primary06);
      }
    }
  }
}

.help-translate {
  display: flex;
  justify-content: center;
  padding: 20px 0;

  .help-translate-box {
    width: 80%;

    textarea {
      width: 100%;
      height: 200px;
      margin: 0;
      resize: none;
      outline: none;
      padding: 10px 20px;
      font-size: 16px;
      color: var(--primary-text);
      line-height: 1.4;
    }

    .operation {
      padding: 0 20px;
      width: 100%;
      height: 58px;
      display: flex;
      align-items: center;
      justify-content: right;

      .button {
        user-select: none;
        -webkit-user-select: none;
        cursor: pointer;
        color: #fff;
        font-size: 16px;
        padding: 5px 10px;
        border-radius: 5px;
        transition: all .3s;
        background-color: var(--primary);
      }

      .button:hover {
        background-color: var(--primary06);
      }
    }

    .result {
      .title {
        font-weight: 800;
        color: var(--primary);
        font-size: 16px;
      }

      .info {
        padding: 10px 0;
        word-break: break-word;
        font-size: 16px;
        color: var(--regular-text);
        line-height: 1.4;
      }
    }
  }
}
</style>
